<template>
  <view class="edit-info">
    <view class="info-form">
      <button class="avatar-wrapper" plain open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
        <i v-if="!avatarUrl" class="avatar iconfont icon-userCenter"></i>
        <image v-else class="avatar" :src="avatarUrl"></image>
      </button>
      <view class="input-box">
        <view class="line">
          <view class="label">昵称</view>
          <input type="nickname" class="nickname-input" placeholder="请输入昵称" v-model.trim="nickName" @change="updateNickName" />
        </view>
        <view class="line">
          <view class="label">手机</view>
          <view class="content">
            <text v-show="phoneNumber" class="phone">{{ phoneNumber }}</text>
            <button class="inline-btn" open-type="getPhoneNumber" @getphonenumber="getPhone">{{ phoneNumber ? '更新' : '获取手机号' }}</button>
          </view>
        </view>
      </view>
    </view>
    <view class="btn-box">
      <button class="btn-submit" @click="submit()">保存</button>
    </view>
  </view>
</template>

<script>
import { getImagePath } from '@/utils/index.js';
export default {
  data() {
    return {
      params: {},
      avatarUrl: '',
      avatarPath: '',
      nickName: '',
      phoneNumber: '',
      isAvatarChanged: false
    };
  },
  onLoad(option) {
    const self = this
    Object.assign(self.params, option)
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      const self = this;
      uni.request({
        url: '/user/get',
        success(result) {
          if (result.data.success && result.data.data) {
            const userInfo = result.data.data;
            self.nickName = userInfo.name || '';
            self.phoneNumber = userInfo.phone || '';
            self.avatarPath = userInfo.photo;
            self.avatarUrl = getImagePath(self.avatarPath);
          }
        },
        fail(e) {
          console.log(e);
        },
        complete() {
          uni.stopPullDownRefresh();
        }
      });
    },
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail;
      this.avatarPath = avatarUrl;
      this.avatarUrl = avatarUrl;
      this.isAvatarChanged = true;
    },
    updateNickName(e) {
      this.nickName = e.detail.value;
    },
    getPhone (e) {
      if (!e.detail.code) {
        console.error(e.detail)
        uni.showToast({
          title: '获取手机号失败',
          icon: 'none',
          duration: 2000
        })
        return
      }
      const self = this
      uni.request({
        url: '/sys/getPhoneNumber',
        method: 'POST',
        data: {
          code: e.detail.code
        },
        success(result) {
          if (result.data.success && result.data.data?.phoneNumber) {
            self.phoneNumber = result.data.data.phoneNumber
          }
        }
      })
    },
    submit() {
      const self = this;
      if (!self.nickName) {
        uni.showToast({
          title: '请输入昵称',
          icon: 'none',
          duration: 2000
        });
        return
      }
      if (!self.isAvatarChanged) {
        self.saveUserInfo();
      } else {
        self.uploadFile(self.avatarUrl, () => {
          self.saveUserInfo();
        });
      }
    },
    uploadFile(filePath, callback) {
      const self = this;
      uni.uploadFile({
        url: '/sys/upload',
        filePath,
        name: 'file',
        success(result) {
          if (result.data.url) {
            self.avatarPath = result.data.url;
            self.avatarUrl = getImagePath(self.avatarPath);
            self.isAvatarChanged = false
            if (callback instanceof Function) {
              callback();
            }
          }
        }
      });
    },
    saveUserInfo() {
      const self = this;
      uni.request({
        url: '/user/modify',
        method: 'POST',
        data: {
          name: self.nickName,
          phone: self.phoneNumber,
          photo: self.avatarPath
        },
        success(result) {
          if (result.data.success) {
            uni.showToast({
              icon: 'success',
              title: '保存成功'
            })
            if (self.params.toIndex) {
              self.toIndex()
            } else {
              self.goBack()
            }
          }
        }
      });
    },
    goBack() {
      uni.navigateBack();
    },
    toIndex() {
      const self = this
      uni.navigateTo({
        url: '/pages/entrance/index/index'
      })
    }
  }
};
</script>

<style scoped lang="scss">
.edit-info {
  padding: 60rpx 115rpx;
  height: 100vh;
  background-color: $white;
}
.info-form {
  padding-top: 60rpx;
  .avatar-wrapper {
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    image.avatar {
      border: 4rpx solid rgba($primary, 0.7);
    }
    .avatar {
      box-sizing: border-box;
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      font-size: 120rpx;
      line-height: 1;
      color: $primary;
    }
  }
  .input-box {
    margin-top: 80rpx;
    .line {
      position: relative;
      border-bottom: 2rpx solid $border-base;
      padding: 20rpx 40rpx 20rpx 120rpx;
      margin-bottom: 20rpx;
    }
    .label {
      position: absolute;
      top: 0;
      left: 20rpx;
      height: 100%;
      display: flex;
      align-items: center;
      font-size: $font-size-4;
      color: $text-secondary;
    }
    .content {
      display: flex;
      align-items: center;
    }
    .phone {
      margin-right: 30rpx;
    }
  }
}
.inline-btn {
  display: inline-flex;
  font-size: $font-size-4;
  background-color: transparent;
  border: 0;
  color: $primary;
  padding: 12rpx 0;
  margin: 0;
  line-height: normal;
  &:after {
    display: none;
  }
}
.btn-box {
  margin-top: 80rpx;
  button + button {
    margin-top: 40rpx;
  }
  .btn-submit {
    background-color: $primary;
    color: $white;
  }
}
</style>
